<template>
    <headerTitle title="我的订单"></headerTitle>
    <h3>未支付订单信息：</h3>
    <ul class="order">
        <li v-for="order in getPaidOrder" :key="order" @click="router.push({ name: 'paymentPage', query: { id: order.order.orderId } })">
            <div class="order-info">
                <p>
                    {{ order.restaurant.businessName }}
                    <i class="fa fa-caret-down"></i>
                </p>
                <div class="order-info-right">
                    <p>&#165;{{ order.order.orderTotal }}</p>
                    <div class="order-info-right-icon">去支付</div>
                </div>
            </div>
            <ul class="order-detailet">
                <li v-for="food in order.foods" :key="food">
                    <p>{{ food.foodName }} x {{ food.quantity }}</p>
                    <p>&#165;{{ food.foodPrice }}</p>
                </li>

                <li>
                    <p>配送费</p>
                    <p>&#165;{{ order.restaurant.deliveryPrice }}</p>
                </li>
            </ul>
        </li>

    </ul>

    <h3>已支付订单信息：</h3>
    <ul class="order">
        <li v-for="order in getdispayOrder" :key="order">
            <div class="order-info">
                <p>
                    {{ order.restaurant.businessName }}
                    <i class="fa fa-caret-down"></i>
                </p>
                <div class="order-info-right">
                    <p>&#165;{{ order.order.orderTotal }}</p>
                    <div class="order-info-right-icon">已支付</div>
                </div>
            </div>
            <ul class="order-detailet">
                <li v-for="food in order.foods" :key="food">
                    <p>{{ food.foodName }} x {{ food.quantity }}</p>
                    <p>&#165;{{ food.foodPrice }}</p>
                </li>

                <li>
                    <p>配送费</p>
                    <p>&#165;{{ order.restaurant.deliveryPrice }}</p>
                </li>

            </ul>
        </li>

    </ul>
</template>

<script setup>
import headerTitle from '@/components/headerTitle.vue';
import { useRouter } from 'vue-router'
import { computed, ref } from 'vue'
import { getOrderListRequest } from '@/js/request';
let router=useRouter()
let orderList = ref([])

let getPaidOrder = computed(() => {
    return orderList.value.filter(function (item) {
        return item.order.orderState == 0
    })
})
let getdispayOrder = computed(() => {
    return orderList.value.filter(function (item) {
        return item.order.orderState == 1
    })
})
getOrderListRequest((respon)=>{
    if(respon.data.code==200){
        orderList.value=respon.data.detail
    } else if (respon.data.code == 400 && respon.data.detail.errorCode == 401) {
        router.push({name:'loginPage'})
    }
})

</script>

<style lang="scss" scoped>
h3 {
    margin-top: 12vw;
    box-sizing: border-box;
    padding: 4vw;
    font-size: 4vw;
    font-weight: 300;
    color: #999;
}

.order {
    width: 100%;
}

.order li {
    width: 100%;
}

.order li .order-info {
    box-sizing: border-box;
    padding: 2vw 4vw;
    font-size: 4vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order li .order-info .order-info-right {
    display: flex;
}

.order li .order-info .order-info-right .order-info-right-icon {
    background-color: #f90;
    color: #fff;
    border-radius: 3px;
    margin-left: 2vw;
    user-select: none;
    cursor: pointer;
}

.order li .order-detailet {
    width: 100%;
}

.order li .order-detailet li {

    width: 100%;
    box-sizing: border-box;
    padding: 1vw 4vw;
    color: #666;
    font-size: 3vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>